<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description"
	content="easyui help you build your web page easily!">
<title>Add a pagination to TreeGrid - jQuery EasyUI Demo</title>
<!-- <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> -->

<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="./jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Add a pagination to TreeGrid</h2>
	<div class="demo-info" style="margin-bottom: 10px">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>This example shows how to add a pagination to TreeGrid.</div>
	</div>

	<table id="dg" title="Products" class="easyui-treegrid"
		style="width: 700px; height: 400px" toolbar="#toolbar"
		data-options="
                url: 'dict_getdata.action',
                rownumbers: true,
                pagination: true,
                pageSize: 2,
                pageList: [2,10,20],
                idField: 'id',
                treeField: 'name',
                remoteSort: false,
                onContextMenu: onContextMenu,          
                onBeforeLoad: function(row,param){
                    if (!row) {    // load top level rows
                        param.id = 0;    // set id=0, indicate to load new page rows
                    }
                }
            ">
		<thead>
			<tr>
				<th field="name" width="250" sortable="true" sorter="sort">Name</th>
				<th field="value" width="100" align="right">Value</th>
				<th field="sort" width="150" align="right">Sort</th>
				<th field="remark" width="150" align="right">remark</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<input class="easyui-searchbox"
			data-options="prompt:'Please Input Value',menu:'#options',searcher:doSearch"
			style="width: 500px"></input>
		<div id="options">
			<div data-options="name:'name',iconCls:'icon-ok'">Name</div>
			<div data-options="name:'value'">Value</div>
			<div data-options="name:'remark'">Remark</div>
		</div>

		<div>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick="newItem()">New Item</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-add" plain="true" onclick="appendItem()">Append
				Item</a> <a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-edit" plain="true" onclick="editItem()">Edit Item</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="destroyItem()">Remove
				Item</a>
		</div>
	</div>
	<div id="mm1" class="easyui-menu">
		<div onclick="editItem()" data-options="iconCls:'icon-edit'">Edit Item</div>
		<div onclick="appendItem()" data-options="iconCls:'icon-add'">Append Item</div>
		<div onclick="destroyItem()" data-options="iconCls:'icon-remove'">Remove Item</div>
	</div>
	<div id="mm2" class="easyui-menu">
		<div onclick="editItem()" data-options="iconCls:'icon-edit'">Edit Item</div>
		<div onclick="appendItem()" data-options="iconCls:'icon-add'">Append Item</div>
		<div onclick="destroyItem()" data-options="iconCls:'icon-remove'">Remove Item</div>
		<div onclick="moveUp()">Move Up</div>
		<div onclick="moveDown()">Move Down</div>
	</div>
	<div id="dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">Item Information</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>Name:</label> <input name="name" class="easyui-textbox"
					required="true">
			</div>
			<div class="fitem">
				<label>Value</label> <input name="value" class="easyui-textbox">
			</div>
			<div class="fitem">
				<label>Sort</label> <input name="sort" class="easyui-numberbox"
					required="true">
			</div>
			<div class="fitem">
				<label>Remark</label> <input name="remark" class="easyui-textbox">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6"
			iconCls="icon-ok" onclick="saveItem()" style="width: 90px">Save</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"
			style="width: 90px">Cancel</a>
	</div>

	<script>
		function onContextMenu(e, row) {
			e.preventDefault();
			$(this).treegrid('select', row.id);
			if (row.path == ";0;") {
				$('#mm1').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			} else {
				$('#mm2').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		}

		function sort(a, b) {
			a = a.split('/');
			b = b.split('/');
			if (a[2] == b[2]) {
				if (a[0] == b[0]) {
					return (a[1] > b[1] ? 1 : -1);
				} else {
					return (a[0] > b[0] ? 1 : -1);
				}
			} else {
				return (a[2] > b[2] ? 1 : -1);
			}
		}

		var url;
		var type;
		function newItem() {
			$('#dlg').dialog('open').dialog('setTitle', 'New Item');
			$('#fm').form('clear');
			url = 'save_dict.action?path=;0;';
			type = 'new';
		}
		function appendItem() {
			var row = $('#dg').treegrid('getSelected');
			if (row) {
				$('#dlg').dialog('open').dialog('setTitle', 'Append Item');
				$('#fm').form('clear');
				var path = row.path + row.id + ';';
				url = 'save_dict.action?path=' + path;
				type = 'append';
			} else {
				$.messager.show({
					title : 'Information',
					msg : 'Please select one item to append!'
				});
			}
		}
		function editItem() {
			var row = $('#dg').treegrid('getSelected');
			console.log('row: ' + JSON.stringify(row));
			if (row) {
				$('#dlg').dialog('open').dialog('setTitle', 'Edit Item');
				$('#fm').form('load', row);
				url = 'update_dict.action?id=' + row.id + '&path=' + row.path;
				type = 'update';
			}
		}
		function saveItem() {
			$('#fm').form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(result) {
					var result = eval('(' + result + ')');
					console.log('result: ' + JSON.stringify(result));
					if (result.errorMsg) {
						$.messager.show({
							title : 'Error',
							msg : result.errorMsg
						});
						console.log('errorMsg: ' + result.errorMsg);
					} else {
						console.log('success: ' + result.success);
						$('#dlg').dialog('close'); // close the dialog
						//$('#dg').treegrid('reload');    // reload the item data
						reloadItem(result.data);
					}
				}
			});
		}

		function reloadItem(data) {
			var row = $('#dg').treegrid('getSelected');
			if (type == 'new') {
				//$('#dg').treegrid('reload', data.id);
				console.log('new item');
				var allData = $('#dg').treegrid('getData');
				console.log('all data: ' + JSON.stringify(allData));
				allData.push(data);
				$('#dg').treegrid('loadData', allData);

				//$('#dg').treegrid('getPager').pagination('refresh',{ displayMsg:'' });

				//$('.pagination').pagination('options');
			} else if (type == 'append') {
				var list = [];
				list.push(data);
				$('#dg').treegrid('append', {
					parent : row.id, // the node has a 'id' value that defined through 'idField' property
					data : list
				});
			} else if (type == 'update') {
				$('#dg').treegrid('update', {
					id : row.id,
					row : data
				});
			}
		}

		function destroyItem() {
			var row = $('#dg').treegrid('getSelected');
			if (row) {
				$.messager.confirm('Confirm',
						'Are you sure you want to destroy this item?',
						function(r) {
							if (r) {
								$.post('destroy_dict.action', {
									id : row.id
								}, function(result) {
									if (result.success) {
										//$('#dg').treegrid('reload');    // reload the item data
										$('#dg').treegrid('remove', row.id);
									} else {
										$.messager.show({ // show error message
											title : 'Error',
											msg : result.errorMsg
										});
									}
								}, 'json');
							}
						});
			}
		}

		function doSearch(value,name){
			//alert('You input: ' + value+'('+name+')');
			console.log('You input: ' + value+'('+name+')');
			
			if ($.trim(value) ==  '') {
				$.messager.show({ // show error message
					title : 'information',
					msg : 'Please input value',
					timeout:3000
				});
				return;
			}
			
			$.ajax( {
			    url:'search_dict.action',
			    data:{
			    	name : name,
			    	value : value
			    },
			    type:'post',
			    cache:false,
			    dataType:'json',
			    success:function(result) {
			        if(result.success){
			        	$('#dg').treegrid('loadData', result.data);
			        } else {
			        	$.messager.show({ // show error message
							title : 'Error',
							msg : result.errorMsg
						});
			        }
			     },
			     error : function() {
			          alert("Check your network！");
			     }
			});  
		}
		
		function move(type, row) {
			$.ajax( {
			    url:'adjust_dict.action',
			    data:{
			    	id: row.id,
			    	path: row.path,
			    	sort: row.sort,
			    	move: type
			    },
			    type:'post',
			    cache:false,
			    dataType:'json',
			    success:function(result) {
			        if(result){
			        	console.log('update: ' + JSON.stringify(result));
			        	//result = eval(result);
			        	var length = result.length;
			        	console.log('length: ' + JSON.stringify(result.length));
			        	
			        	/* for (var i = 0; i < length; i++) {
			        		console.log('update item: ' + JSON.stringify(item));
			        		var item = result[i];
			        		$('#dg').treegrid('update', {
								id : item.id,
								row : item
							});
			        	} */
			        	
			        	$('#dg').treegrid('reload');

			        	showMoveResult('Move item success');
			        } else {
			        	showMoveResult('Cannot move the item');
			        }
			     }
			});
		}
		
		function showMoveResult(txt) {
			$.messager.show({
				title : 'Message',
				msg : txt,
				timeout: 3000
			});
		}
		
		function moveUp() {
			var row = $('#dg').treegrid('getSelected');
			console.log(JSON.stringify(row));
			if (row) {
				if (row.sort == 1 || row.path == ";0;") {
					showMoveResult('Cannot move the item');
					return;
				}
				
				move('up', row);
			}
		}
		
		function moveDown() {
			var row = $('#dg').treegrid('getSelected');
			if (row) {
				if (row.path == ";0;") {
					showMoveResult('Cannot move the item');
					return;
				}
				
				move('down', row);
			}
		}
	</script>
	<style type="text/css">
		#fm {
			margin: 0;
			padding: 10px 30px;
		}
		
		.ftitle {
			font-size: 14px;
			font-weight: bold;
			padding: 5px 0;
			margin-bottom: 10px;
			border-bottom: 1px solid #ccc;
		}
		
		.fitem {
			margin-bottom: 5px;
		}
		
		.fitem label {
			display: inline-block;
			width: 80px;
		}
		
		.fitem input {
			width: 160px;
		}
	</style>
</body>
</html>